<template>
  <div class="app-container">
    <el-card shadow="never" border="none">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :inline="true"
        style="width: 1000px"
        label-position="left"
        label-width="100px"
      >
        <div>
          <el-row>
            <el-col :span="20">
              <el-form-item label="邮件内容" prop="content" style="width: 95%;">
                <el-input
                  v-model="formData.content"
                  style="width: 100%"
                  type="textarea"
                  placeholder="请输入邮件内容"
                  :rows="10"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-row>
                <el-col
                  :span="12"
                  v-for="(item, index) in parmList"
                  :key="index"
                >
                  <el-tag
                    @click="intpuparm(item)"
                    style="width: 95%"
                    class="mr-[9px] mb-[12px] cursor-pointer"
                  >{{ item.name }}</el-tag
                  >
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="接收人提示" prop="recipientPrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.recipientPrompt"
                  style="width: 100%"
                  placeholder="请输入接收人提示"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="查看人提示" prop="viewThePersonPrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.viewThePersonPrompt"
                  style="width: 100%"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="责任人提示" prop="responsiblePersonPrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.responsiblePersonPrompt"
                  style="width: 100%"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="超时提醒提示" prop="timeoutRemindersPrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.timeoutRemindersPrompt"
                  style="width: 100%"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工单超期" prop="orderTimeoutPrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.orderTimeoutPrompt"
                  style="width: 100%"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工单申请升级" prop="orderApplyUpdatePrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.orderApplyUpdatePrompt"
                  style="width: 100%"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="工单3次超期" prop="orderThreeTimeoutPrompt" style="width: 100%;">
                <el-input
                  v-model="jsonData.orderThreeTimeoutPrompt"
                  style="width: 100%"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row
          style="
            max-width: 700px;
            display: flex;
            justify-content: flex-start;
            margin: 20px 0 20px;
          "
        >
          <el-button
            type="primary"
            :loading="loading"
            @click="handleSubmit"
          >确 定
          </el-button>
          <el-button @click="getData">取 消</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">

import {authAllPerm} from "@/utils";
import {RootObject} from "@/views/psm/common/index";
import {validateNumberCanNot} from "@/utils/commonHooks";
import request from "@/utils/request";

defineOptions({
  name: "MAILFORMAT",
  inheritAttrs: false,
});

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const formData = reactive({
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  id: props.id,
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  remarks: "",
  version: 0,
  content: "",
  promptInformation: "",
});

const jsonData = reactive({
  recipientPrompt: "",
  viewThePersonPrompt: "",
  responsiblePersonPrompt: "",
  timeoutRemindersPrompt: "",
  orderTimeoutPrompt: "",
  orderApplyUpdatePrompt: "",
  orderThreeTimeoutPrompt: "",
});


const rules = reactive<any>({
  content: [{ required: true, message: "邮件内容不能为空", trigger: "change" }],
});
const loading = ref<boolean>(false);
const formRef = ref();


function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      formData.promptInformation = JSON.stringify(jsonData);
      loading.value = true;
      await request({
        url: `/dmpDosPcm/psmmailformat/save/${props.id}`,
        method: "post",
        data: formData,
      })
        .then(async () => {
          loading.value = false;
          ElMessage.success("保存成功");
          await getData();
        })
        .catch(() => {
          loading.value = false;
        });
    } else {
      ElMessage.error("请完善信息");
    }
  });
}


const getData = async () => {
  const { data: first } = await request({
    url: `/dmpDosPcm/psmmailformat/get/${props.id}`,
    method: "get",
  });
  Object.assign(formData, {
    ...first,
  });
  Object.assign(jsonData, {
    ...formData.promptInformation ? JSON.parse(formData.promptInformation) : {},
  });

  setTimeout(() => {
    formRef.value.clearValidate();
  }, 0);
};
onMounted(async () => {
  await getData();
  await getParmList();
});

const parmList = ref([]);

async function getParmList() {
  let retparmList = await request({
    url: `/dmpDosPcm/psmmailformat/${props.id === 'psmMailFormat' ? 'psm' : 'pcm'}/getParmList`,
    method: "post",
    data: {},
  }).finally(() => {
    loading.value = false;
  });
  parmList.value = retparmList.data;
}

function intpuparm(item: any) {
  formData.content = formData.content + item.code;
}
</script>
